import { useState } from 'react';
import '../Concepts/Concepts.css';
import Reduxjs from './children/Reduxjs';
import ReactRouter from './children/ReactRouter';
import UseReducer from './children/UseReducer';
import Performance from './children/Performance';
import ForwardRef from './children/ForwardRef';
import Zustand from './children/Zustand';



const Concepts = () => {
  const [activeTab, setActiveTab] = useState('reduxjs');
  const tabs = [
    { id: 'reduxjs', title: 'Reduxjs', component: <Reduxjs></Reduxjs> },
    { id: 'react-router', title: 'React Router', component: <ReactRouter></ReactRouter> },
    { id: 'useReducer', title: 'useReducer', component: <UseReducer></UseReducer> },
    { id: 'performance', title: '性能优化', component: <Performance></Performance> },
    { id: 'forwardRef', title: 'ForwardRef', component: <ForwardRef></ForwardRef> },
    { id: 'zustand', title: 'Zustand', component: <Zustand></Zustand> }
  ];

  return (
    <div className="concepts">
      <div className="concepts-header">
        <h1>React进阶</h1>
        <p>React进阶知识，帮助你快速开发。</p>
      </div>

      <div className="tabs-container">
        <div className="tabs">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.title}
            </button>
          ))}
        </div>

        <div className="tab-content">
          {tabs
            .filter(tab => tab.id === activeTab)
            .map(tab => (
              <div key={tab.id}>{tab.component}</div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default Concepts;
